<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品分类</title>
    <link rel="stylesheet" href="layui/css/layui.css" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" href="fonts/iconfonts.css" th:href="@{/fonts/iconfonts.css}">
    <script type="text/javascript" src="js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" src="layui/layui.js" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" src="layui/layui.all.js" th:src="@{/layui/layui.all.js}"></script>
</head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px">
        <legend>添加商品分类</legend>
    </fieldset>
    <form class="layui-form" id="uploadForm" lay-filter="deptForm"  enctype="mutipart/form-data">
        <div class="layui-form-item" >
            <label class="layui-form-label">分类名</label>
            <div class="layui-input-block">
                <input type="text" name="cateName" id="cateName" lay-verify="required"  placeholder="请输入分类名" class="layui-input" style="width:280px;">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类图标</label>
            <div class="layui-input-block">
                <img src="/images/jiahao.png" class="layui-upload-img" id="photo" style="width: 82px;height: 82px;border: 1px solid #CCC;">
                <p id="errorMsg"></p>
                <input type="file" name="iconFile" id="iconFile" lay-verify="required" style="display: none;"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">序号</label>
            <div class="layui-input-block">
                <input type="text" name="sort" id="sort" lay-verify="required"  placeholder="请输入序号" class="layui-input" style="width:280px;">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;margin-top: 25px;">
            <button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit lay-filter="checkForm" style="width: 300px">
                立即提交
            </button>
        </div>
    </form>

<script>
    layui.use('form',function(){
        var form = layui.form;

        <!-- 预览图片 -->
        $('#photo').click(function(){
            $('#iconFile').click()
            $('#iconFile').change(function(e){
                // 预览图片时，选择的不是图片文件，显示错误信息
                var name = e.target.files[0].name;
                var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
                if(fileName != "jpg" && fileName != "png" && fileName != "jpeg" && fileName != "ico"){
                    $("#errorMsg").html('<span style="color:red;">请选择.png,.jpg,.jpeg,.ico后缀的图片文件</span>');
                    $('#photo').attr('src',"")
                    return false;
                }
                // 清空错误信息
                $("#errorMsg").html('')
                // 预览图片
                var reader = new FileReader();
                reader.readAsDataURL(e.target.files[0])
                reader.onload = function(event) {
                    // 文件里的文本会在这里被打印出来
            console.log("分类名:"+e.target.files[0].name);
                    $('#photo').attr('src',event.target.result)
                };
            })
        })

        form.on('submit(checkForm)',function(data){
            var formData = new FormData($( "#uploadForm" )[0]);
            // 提交时，选择的不是图片文件，驳回
            var name = $("#iconFile").val();
            var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
            if(fileName != "jpg" && fileName != "png" && fileName != "jpeg" && fileName != "ico"){
                layer.msg(
                    "请选择正确格式的图片文件!",
                    {
                        icon:2,
                        time:2000
                    }
                );
                return false;
            }

            $.ajax({
                type:"post",
                url: "/category/addCategory",
                data:formData,
                contentType: false, //必须false才会自动加上正确的Content-Type,否则服务器无法识别
                processData: false,//注意以上两个配置，不加报错：Uncaught TypeError: Illegal invocation
                dataType: "json",
                success:function(result){
                    if(result.success){
                        layer.msg(
                            result.message,
                            {
                                icon:1,
                                time:1000
                            },
                            function(){
                                // 先得到当前 iframe 层的索引
                                var index = parent.layer.getFrameIndex(window.name);
                                // 关闭当前 iframe 层
                                parent.layer.close(index);
                            }
                        );
                    } else{
                        layer.msg(
                            result.message,
                            {
                                icon:2,
                                time:1000
                            }
                        );
                    }
                },
                error: function(data){
                    layer.msg("网络错误！");
                }
            });
            return false;
        });
    });

</script>
</body>
</html>